<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="pie" style="width: 1200px; height: 1100px;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
<script>
    const option = {
        title: {
            text: '采购商品价格分布图',
            subtext: 'data from mysql ',
            left: 'left',
            textStyle: {
                fontSize: 24 // 调整标题字体大小
            }
        },
        legend: {
            top: 'top'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)' // 显示数据的详细信息
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '采购价格',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                label: {
                    show: true, // 显示标签
                    position: 'outside', // 标签显示在外侧
                    formatter: '{b}: {c} ({d}%)' // 标签显示格式
                },
                labelLine: {
                    show: true // 显示标签连接线
                },
                data: []
            }
        ]
    };
    var chartDom = document.getElementById('pie');
    var myChart = echarts.init(chartDom);

    fetch("/stats/getbyprice1")
        .then(response => response.json())
        .then(res => {
            res.forEach(item => {
                option.series[0].data.push({ name: item.price, value: item.count });
            });
            myChart.setOption(option);
        })
        .catch(error => console.error('Error fetching data:', error));
</script>
</body>
</html>
